<template>
  <div class='searchResult-song'>
    <!-- 搜索内容列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onSearchSongs"
    >
      <van-cell
        :border="false"
        v-for="(item, index) in songList"
        :key="item + index"
        @click="playedSong(index)"
      >
        <!-- 歌曲名称 -->
        <div slot="title" class="songName">
          <span v-html="handlerSongName(item)"></span>
          <span style="color: #cccccc">
            {{ item.alias ? item.alias[0] : '' }}
          </span>
        </div>
        <!-- / 歌曲名称 -->

         <!-- 艺术家 -->
        <div slot="label" class="aitistsInfo">
          <span v-html="handlerSongArtists(item)"></span>
          <span v-html="handlerSongAlbum(item)"></span>
        </div>
        <!-- / 艺术家 -->
      </van-cell>
    </van-list>
    <!-- 搜索内容列表 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { List, Cell } from 'vant'
import { searchSongs } from '@/api/music'

export default {
  name: 'searchResult',
  components: {
    [List.name]: List,
    [Cell.name]: Cell
  },
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      songList: [],
      offset: 0,
      loading: false,
      finished: false
    }
  },
  computed: {
    ...mapState(['loginData', 'playingSongList', 'playedSongIndex'])
  },
  watch: {
    searchText () {
      this.songList = []
      this.offset = 0
      this.onSearchSongs()
    }
  },
  created () {},
  mounted () {},
  methods: {
    async onSearchSongs () {
      const { data } = await searchSongs({
        keyword: this.searchText,
        offset: this.offset,
        type: 1,
        timestamp: new Date().getTime()
      })
      this.songList.push(...data.result.songs)
      this.loading = false
      this.offset += 29
    },
    // 处理歌曲名称显示
    handlerSongName (item) {
      return item.name.replace(
        new RegExp(this.searchText, 'gi'),
        `<span style="color: #E0674A">${this.searchText}</span>`
      )
    },
    // 处理艺术家高亮显示
    handlerSongArtists (item) {
      const artists = []
      item.artists.forEach(item => {
        artists.push(item.name)
      })
      return artists.join(' / ').replace(
        new RegExp(this.searchText, 'gi'),
        `<span style="color: #E0674A">${this.searchText}</span>`
      )
    },
    // 处理歌曲别名显示
    handlerSongAlbum (item) {
      const albumName = ' - ' + item.album.name
      return albumName.replace(
        new RegExp(this.searchText, 'gi'),
        `<span style="color: #E0674A">${this.searchText}</span>`
      )
    },
    playedSong (index) {
      this.$store.commit('setPlayedSongIndex', index)
      this.$store.commit('setPlayingSongList', this.songList)
      this.$store.commit('setPlayedSongId', this.playingSongList[this.playedSongIndex].id)
    }
  }
}
</script>
<style lang='less' scoped>
.searchResult-song {
  position: fixed;
  overflow-y: auto;
  top: 86px;
  bottom: 47px;
  right: 0;
  left: 0;
  .van-cell {
    padding: 7px 15px;
    line-height: 18px;
  }
  .songName {
    font-size: 14px;
    width: 347px;
    white-space: nowrap;
    overflow: hidden;
  }
  .aitistsInfo {
    font-size: 10px;
    width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
